<template>
    <div class="h" style="margin: 0px; padding: 0px">
        <el-row :gutter="24" class="mainContainer">
            <el-col :span="4" class="left">
                <PlayerInfo :p-info="playerInfo[0]" class="playerInfoShow"></PlayerInfo>
                <PlayerInfo :p-info="playerInfo[1]" class="playerInfoShow"></PlayerInfo>
            </el-col>
            <el-col :span="16" class="center">
                <div class="map">
                    <el-row v-for="(row,index) in gameMap" :key="index+gameKey * 2" :gutter="mapWidth"
                            style="height: 50px; margin: 0px; padding: 0px;">
                        <el-col v-for="(col, iindex) in row" :span="1" style="width: 50px;margin: 0px; padding: 0px;">
                            <el-image :src="draw(gameMap[index][iindex])" class="gameItem">

                            </el-image>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-image :src="STAR" class="star"></el-image>
                </div>
            </el-col>
            <el-col :span="4" class="right">
                <PlayerInfo :p-info="playerInfo[2]" class="playerInfoShow"></PlayerInfo>
                <PlayerInfo :p-info="playerInfo[3]" class="playerInfoShow"></PlayerInfo>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import PlayerInfo from "@/components/playerInfo";

export default {
    name: "tem",
    data: function () {
        return {
            title: "这里是主页",
            gameMap: [],
            gameKey: 1000,
            mapWidth: 14,
            mapHeight: 14,

            // 游戏玩家信息
            playerInfo: [],

            TREE: require("../../assets/gameImg/tree.png"),
            GRASS: require("../../assets/gameImg/grass.png"),
            FIRE: require("../../assets/gameImg/fire.png"),
            SWEET: require("../../assets/gameImg/sweet.png"),
            GAMEWALL: require("../../assets/gameImg/wall.png"),
            STAR: require("../../assets/gameImg/star.png"),
            mNULL: require("../../assets/gameImg/null.png"),

        }
    },
    created() {
        console.log("ok")
        this.gameInit();
    },
    computed: {},
    components: {
        PlayerInfo,
    },
    methods: {
        gameInit() {
            document.body.onselectstart = function () {
                return false;
            }
            this.gameMap = this.ramdomMap(this.mapWidth, this.mapHeight);
            this.addWall();
            this.creatPlayerInfo();
            console.log(this.gameMap);
            console.log(this.playerInfo)

        },
        // 随机生成地图
        ramdomMap(width, height) {
            let map = new Array();
            for (let i = 0; i < height; i++) {
                let tem = new Array();
                for (let j = 0; j < width; j++) {
                    let t = Math.random();
                    //   console.log(t)
                    if (t <= 0.2) {
                        tem.push("tree");
                    } else if (t <= 0.3) {
                        tem.push("grass");
                    } else if (t <= 0.4) {
                        tem.push("fire");
                    } else if (t <= 0.6) {
                        tem.push("sweet");
                    } else if (t <= 0.8) {
                        tem.push("star");
                    } else {
                        tem.push("null");
                    }
                }
                map.push(tem)
            }
            console.log(map)
            return map;
        },
        // 添加围墙
        addWall() {
            let width = this.mapWidth;
            let height = this.mapHeight;
            let first = new Array();
            let map = this.gameMap;
            for (let i = 0; i < height; i++) {
                first.push("wall");
                this.gameMap[i].unshift("wall")
                this.gameMap[i].push("wall")
            }
            first.push("wall");
            first.push("wall");
            this.gameMap.unshift(first);
            this.gameMap.push(first)
            this.gameKey = this.gameKey + 1;
            // console.log("gamemap:"+this.gameMap)
        },

        // 画地图
        draw(mtype) {
            switch (mtype) {
                case "tree":
                    return this.TREE;
                case "grass":
                    return this.GRASS;
                case "fire":
                    return this.FIRE;
                case "sweet":
                    return this.SWEET;
                case "wall":
                    return this.GAMEWALL;
                case "star":
                    return this.STAR;
                default:
                    return this.mNULL;
            }
        },

        // 模拟玩家信息
        creatPlayerInfo() {
            for (let i = 0; i < 4; i++) {
                let pinfo = {
                    playerIndex: (i + 1),
                    playerName: "玩家" + (i + 1),
                    bomCount: 1,
                    power: 1,
                    speed: 1,
                    score: 1,
                    stateKey: "state" + i
                }
                // console.log(pinfo)
                this.playerInfo.push(pinfo);
            }
        },


    }


}
</script>

<style scoped>

.mainContainer {

}

.star {
    animation: moveLeft 2s infinite;
    animation-duration: 2s;
}

@-webkit-keyframes moveLeft {
    50% {
        left: 10px
    }

}

.left {
    background: chartreuse;
    /*height: 100%;*/
    /*min-height: 900px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;


    height: 100vh;
}

.center {
    background: antiquewhite;
    height: 100vh;
    display: flex;
    justify-content: space-around;

    /*align-content: stretch;*/
}

.right {
    background: chartreuse;

    display: flex;
    flex-direction: column;
    /*justify-content:space-between;*/
    justify-content: space-around;
    align-items: center;

    height: 100vh;
}

.map {
    width: 800px;
    height: 800px;
    /*margin: 4% 17%;*/
    margin: 5% 0;

}

.el-col {
    margin: 0px !important;
    padding: 0px !important;
}

.el-row {
    margin: 0px !important;
    padding: 0px !important;
}

.el-image {
    margin: 0px !important;
    padding: 0px !important;
    display: block;
}

.gameItem {
    width: 50px;
    height: 50px;
}

.playerInfoShow {
    height: 400px;
    /*display:flex;*/
    justify-content: space-around;
    /*align-items:center;*/

}

</style>
